import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import FollowCard from '../../Card/FollowCard'
import { FollowWaterfallMock } from './mock'

export default function FollowWaterfall() {
    const [cardWidth, setCardWidth] = useState<any>()
    const [followWaterfall, setFollowWaterfall] = useRecoilState(FollowWaterfallMock)

    useEffect(() => {
        setCardWidth(($(`.${style.container}`).width()! - 24) / 2 + 'px')
    })

    return (
        <div
            className={style.container}
            style={{
                ['--card-width' as any]: cardWidth
            }}>
            {followWaterfall.map((res, index) => {
                return (
                    <div className={style.card} key={index}>
                        <FollowCard date={res} />
                    </div>
                )
            })}
        </div>
    )
}
